<template>
  <eip-modal :visible="visible" :title="title" @close="cancel" :width="1100">
    <template slot="body">
      <a-tag color="pink">
        系统默认字段:
        Id,RowId,Status,CreateUserId,CreateUserName,CreateTime,UpdateUserId,UpdateUserName,UpdateTime
      </a-tag>
      <div class="padding-top-xs">
        <vxe-toolbar ref="toolbar">
          <template v-slot:buttons>
            <a-space>
              <a-input
                addon-before="表别名"
                v-model="tableName"
                placeholder="请输入表别名"
              />
              <a-button icon="edit" type="danger" @click="createModelName"
                >生成所有字段拼音</a-button
              >
            </a-space>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="table"
          :tree-config="{
            expandAll: true,
            transform: true,
            rowField: 'key',
            parentField: 'pid',
            trigger: 'row',
          }"
          height="600px"
          :data="columns"
        >
          <template #empty>
            <eip-empty />
          </template>
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column title="创建时间" min-width="140" showOverflow="ellipsis">
            <template #default="{ row }">
              {{ createTimeFormat(row.key) }}
            </template>
          </vxe-column>
          <vxe-column
            field="label"
            title="字段名称"
            min-width="140"
            showOverflow="ellipsis"
          >
            <template #default="{ row }">
              <eip-zerocode-field
                :cicon="row.cicon"
                :icon="row.icon"
                :label="row.label"
              ></eip-zerocode-field>
            </template>
          </vxe-column>
          <vxe-column
            field="id"
            title="类型"
            width="120"
            showOverflow="ellipsis"
          >
            <template #default="{ row }">
              {{ row.type }}
            </template>
          </vxe-column>
          <vxe-column
            field="key"
            title="字段ID"
            min-width="200"
            showOverflow="ellipsis"
          >
            <template #default="{ row }">
              {{ row.key }}
              <a-tooltip title="复制">
                <a-icon type="copy" @click="copyValue(row.key)"></a-icon>
              </a-tooltip>
            </template>
          </vxe-column>
          <vxe-column
            field="model"
            title="字段别名"
            min-width="260"
            showOverflow="ellipsis"
          >
            <template #default="{ row }">
              <a-input
                :placeholder="row.model"
                :allowClear="true"
                v-model="row.model"
              >
                <div slot="suffix">
                  <a-tooltip title="复制">
                    <a-icon type="copy" @click="copyValue(row.model)"></a-icon>
                  </a-tooltip>

                  <a-tooltip title="点击去翻译">
                    <a
                      :href="
                        'https://fanyi.baidu.com/translate?query=' +
                        row.label +
                        '&lang=auto2zh#zh/en/' +
                        row.label
                      "
                      target="_blank"
                      >翻译</a
                    >
                  </a-tooltip>
                </div>
              </a-input>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </template>
    <template slot="footer">
      <div class="flex justify-between align-center">
        <div></div>

        <a-space>
          <a-button @click="cancel"><a-icon type="close" />关闭</a-button>
          <a-button key="submit" @click="save" type="primary" :loading="loading"
            ><a-icon type="save" />提交</a-button
          >
        </a-space>
      </div>
    </template>
  </eip-modal>
</template>

<script>
import { VxeUI } from "vxe-pc-ui";
import moment from "moment";
export default {
  name: "aliasSetting",
  data() {
    return {
      loading: false,
      columns: [],
      tableName: this.table,
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    table: {
      type: String,
    },
    zeroCodeId: String,
    title: {
      type: String,
    },
  },
  created() {
    this.columns = this.eipFormDesigner.kfd.getFieldSchema();
  },
  methods: {
    /**
     * 一级拼音生成
     */
    createModelName() {
      this.columns.forEach((f) => {
        if (f.key == f.key) {
          var namePinyin = pinyin.convert(f.label);
          f.model = namePinyin;
        }
      });
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
    /**
     * 保存字段和表别名
     */
    save() {
      this.$emit("save", this.tableName);
    },

    /**
     * 格式化开始时间
     */
    createTimeFormat(datetime) {
      var timestamp = datetime.split("_")[1];
      const date = new Date(parseInt(timestamp));
      var format = moment(date).format("YYYY-MM-DD HH:mm:ss");
      return format;
    },

    /**
     * 复制值
     * @param key
     */
    copyValue(value) {
      if (VxeUI.clipboard.copy(value)) {
        this.$message.success("复制成功");
      } else {
        this.$message.error("复制失败");
      }
    },
  },
};
</script>
